<template>
<!--  <div>-->
<!--    <h1> 查找（条件可以不输全）</h1>-->
<!--    <el-form :inline="true" :model="queryParams" class="query-form">-->
<!--      <el-form-item label="学号">-->
<!--        <el-input-->
<!--            v-model="queryParams.sno"-->
<!--            placeholder="请输入学号"-->
<!--            clearable-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="姓名">-->
<!--        <el-input-->
<!--            v-model="queryParams.sname"-->
<!--            placeholder="请输入姓名"-->
<!--            clearable-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="电话">-->
<!--        <el-input-->
<!--            v-model="queryParams.phone"-->
<!--            placeholder="请输入电话"-->
<!--            clearable-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="handleQuery">查询</el-button>-->
<!--        <el-button @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--  </div>-->
  <hr>
  <h1> 学生增删改查</h1>
  <el-button type="primary" @click="addStu" style="margin: 10px 0">
    新增学生
  </el-button>
  <!--  展示数据列表-->
  <el-table :data="students" style="width: 100%; margin-top: 20px">
    <el-table-column prop="sno" label="学号" width="100"/>
    <el-table-column prop="sname" label="姓名"/>
    <el-table-column prop="Sbirthdate" label="出生日期" width="80"/>
    <el-table-column prop="ssex" label="性别"/>
    <el-table-column prop="smajor" label="专业"/>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="primary" size="small" @click="HandleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页条-->
  <el-pagination
      :page-sizes="[2,5,10, 20,30]"
      layout="total, sizes, prev, pager, next"
      :total="total"
      v-model:current-page="pageParams.currentPage"
      v-model:page-size="pageParams.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <!--    新增或修改的对话框-->
  <el-dialog v-model="dialogVisible">
    <el-form :model="formModel" label-width="80px">
      <el-form-item label="学号">
        <el-input v-model="formModel.sno"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formModel.sname"/>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="formModel.smajor" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="formModel.ssex"/>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-input v-model="formModel.sbirthdate"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </el-dialog>


</template>
<script setup>
import {deleteById, updateById, add, selectByCondition,selectByPage} from '../../api/student.js'
import {ref, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
//总页数
const total = ref(0);
//分页数据模型
const pageParams = ref({
  currentPage: 1,
  pageSize: 5
})
const handleSizeChange = () => {
  fetchData()
}
const handleCurrentChange = () => {
  fetchData()
}

// // 查询参数
// const queryParams = ref({
//   sno: '',
//   sname: '',
//   phone: ''
// })
//查询按钮
// const handleQuery = () => {
//   fetchData();
// }

// //重置按钮
// const resetQuery = () => {
//   //清空查询数据模型
//   queryParams.value = {}
//   fetchData();
// }

const students = ref([])
// 获取数据
const fetchData = async () => {
  const {data} = await selectByPage(pageParams.value.currentPage, pageParams.value.pageSize);
  students.value = data.list
  total.value = data.total
}
onMounted(() => {
  fetchData()
})
// 根据id删除
const handleDelete = (row) => {
  //给出提示删除确认信息
  ElMessageBox.confirm("确认删除吗").then(async () => {
    const {code} = await deleteById(row.id)
    if (code === 200) {
      ElMessage.success("删除成功")
      console.log(code)
      await fetchData()
    }
  }).catch(() => {
    ElMessage.success("取消成功")
  })

}
//新增修改数据模型
const formModel = ref({
  id: null,          // 数据库自增主键
  sno: '',           // 学号
  sname: '',         // 姓名
  sbirthdate: null,  // 出生日期
  ssex: '',          // 性别
  smajor: ''         // 专业
})
// 控制新增或者修改展示
const dialogVisible = ref(false)

const HandleEdit = async (row) => {
  //数据回显示
  formModel.value = {...row}
  dialogVisible.value = true
}
//新增学生
const addStu = () => {
  //清空数据模型
  formModel.value = {
    id: null,          // 数据库自增主键
    sno: '',           // 学号
    sname: '',         // 姓名
    sbirthdate: null,  // 出生日期
    ssex: '',          // 性别
    smajor: ''         // 专业
  }
  dialogVisible.value = true
}


// 提交
const handleSubmit = async () => {
  // 验证码表单，非空放行
  const {sno, sname, sbirthdate, ssex, smajor} = formModel.value
  if (!sno || !sname || !sbirthdate || !ssex || !smajor) {
    ElMessage.error('请填写所有必填字段')
    return
  }
  //有id是修改,没有id是新增
  if (formModel.value.id) {
    //修改
    const {code} = await updateById(formModel.value)
    if (code === 200) {
      ElMessage.success("修改成功")
    }
    dialogVisible.value = false
    await fetchData()
  } else {
    const {code} = await add(formModel.value)
    if (code === 200) {
      ElMessage.success("新增成功")
    }
    dialogVisible.value = false
    await fetchData()
  }
}

</script>

<style scoped>

</style>